<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>Bootstrap 实例 - 悬停表格</title>
    <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
    <script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
    <script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
    <script src="./vue.min.js"></script>
</head>

<body> 

    <div class="container" id="app">
        <h1>任务计划列表</h1>
        <p>
            添加任务：
            <input v-model.trim="todo" @keydown.enter="add" type="text" placeholder="回车添加">
            <button @click="finish">已完成任务</button>
        </p>
        <!-- 任务列表 -->
        <div>
            <ul class="list-group" v-for="(item,index) in list">
                <li class="list-group-item">
                    <input type="checkbox" :checked="item.done" name="" id="" @click="myChange(index)">
                    {{item.value}}
                </li>
            </ul>
        </div>
    </div>

</body>
<script>
    const vm = new Vue({
        el: "#app",
        data: {
            todo: "",
            list: [{
                value: "吃饭",
                done: true
            }, {
                value: "睡觉",
                done: false

            } ,{
                value: "打豆豆",
                done: false

            }]
        },
        methods: {
            add() {

                if(this.todo=="") return;
                this.list.push({
                    value:this.todo,
                    done:false
                })
                 this.todo="";
            },
            finish(){
                let list =[];
                this.list.forEach(item => {
                    if(item.done){
                        list.push(item)
                    }
                });
                this.list = list;
            },
            myChange(index){
                this.list[index].done = !this.list[index].done;
            }
        },
    })
</script>

</html>